
### Vue-Router的实现原理


### $route和$router 的区别

- router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如 history 对象。。。经常用的跳转链接就可以用 this.$router.push，和 router-link 跳转一样。
- route 相当于当前正在跳转的路由对象。。可以从里面获取 name,path,params,query 等



### Vue-router

  - vue-router 路由模式有几种？
    - hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
    - history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
    - abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

- 区别：

  - 表现形态不同，history 不带井号，hash 带井号
  - 跳转请求
     history : https://xuexiluxian.cn/id ===>发送请求
     hash : 不会发送请求

- 实现原理

  - hash 模式：
    - location.hash 的值实际就是 URL 中 #后面的东西，它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
    - 可以为 hash 的改变添加监听事件，每一次改变 hash（window.location.hash）都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，基于可以来实现前端路由“更新视图但不重新请求页面”的功能了
  - history 模式：
    - 利于了 HTM5 History lnterface 中新增的 pushState()和 replaceState()方法，这两个方法应用与浏览器的历史记录栈，在当前已有的 back，forward，go 的基础之上，它们提供了对历史记录进行修改的功能，这两个方法有个共同的特点：当调用他们修改浏览器历史栈后，虽然 URL 改变了，但浏览器不会刷新页面，这就为但也应用前端路由“更新视图但不重新请求页面”提供了基础


- vue-router 传值

  - 显式：http://localhost:8080/about?a=1

   ````js
   // 1.1 传：
      this.$router.push({
   			path:'/about',
   			query:{
   				a:1
   			}
   		})
      ```
   // 1.2 接：`this.$route.query.a`

   ````

  - 隐式：http://localhost:8080/about
   ```js
   // 2.1 传：
   this.$router.push({
     name: "About",
     params: {
       a: 1,
     },
   });
   2.2 接：`this.$route.params.a`
   ```

### Vue Router 中路由的钩子函数有哪些？它们的作用是什么？
  - 全局
     beforeEach、beforeResolve、afterEach
  -  路由独享
     beforeEnter、beforeLeave（路由内部钩子，一般在路由表里）
  -  组件内
     beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

Vue Router 中的路由钩子函数包括 beforeEach、beforeResolve 和 afterEach。它们的作用分别是：

beforeEach: 在跳转路由之前调用，可以用来进行全局的导航守卫逻辑，比如检查用户是否有权限访问某个页面。
beforeResolve: 在解析路由之前调用，和 beforeEach 类似，但是它在异步路由组件解析完成之后被调用。
afterEach: 在跳转路由之后调用，可以用来进行一些全局的后置处理逻辑，比如页面滚动到顶部等。

### 怎么定义 vue-router 的动态路由？怎么获取传过来的值？

可以有两种方式传递参数：params、query
- params：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。


```js 
// 方法 1 
//index.js
path:'/user/:id',
compunent: user

<router-link :to="{ name: 'users', params: { id: 123}}">按钮</router-link>
// 方法2：
this.$router.push({name:'users',params:{id:123}})
// 方法3：
this.$router.push('/user/' + 123)
```
2、query：不需要配置路由格式，使用 router 对象的 query.id 获取。
```js 
// 方法1：
<router-link :to="{ name: 'users', query: { id: 123}}">按钮</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ id:123}})
// 方法3：
<router-link :to="{ path: '/user', query: {  id:123 }}">按钮</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{  id:123 }})
// 方法5：
this.$router.push('/user?uname=' + 123)
```

### Vue Router 中有哪些导航守卫？

Vue Router 中的导航守卫包括全局导航守卫和路由独享的导航守卫。全局导航守卫包括 beforeEach、beforeResolve 和 afterEach，而路由独享的导航守卫包括 beforeEnter。

### Vue Router 中如何实现路由懒加载？
路由懒加载是指在需要加载某个路由时再去加载相应的组件，而不是在页面加载时就把所有组件都加载进来。在 Vue Router 中，可以使用异步组件和动态 import() 语法来实现路由懒加载。

```js 
{
  path: '/foo',
  component: () => import('./Foo.vue')
}
// 这样，在访问 /foo 路径时，会自动异步加载 Foo.vue 组件。
```

### Vue Router 和传统路由有什么区别？

传统的路由通常是通过后端进行处理和渲染，它的作用是在请求一个URL时，服务器会返回该URL所对应的HTML页面，这样用户就可以看到页面的内容了。传统路由的实现需要考虑多个方面，包括后端路由，前端路由，以及路由之间的同步和异步等问题。

而 Vue Router 是一种前端路由，它可以帮助我们在单页面应用中实现视图之间的切换，而无需向服务器发出请求。Vue Router 可以将应用分解成多个组件，并通过路由映射到相应的URL，以便用户在浏览器中访问这些URL时能够看到正确的内容。Vue Router 实现了前端路由，可以动态加载和卸载路由，同时也支持各种路由参数、路由拦截和路由懒加载等特性。

因此，Vue Router 和传统路由之间的区别在于，传统路由是通过服务器返回HTML页面来渲染视图，而 Vue Router 则是通过前端路由实现单页面应用的视图切换，从而提供更快的用户体验和更好的用户界面。

## 路由配置中的 path 和 name 有什么区别？

在 Vue Router 中，path 是用于匹配路由的路径，而 name 是给路由起一个名字，便于在代码中进行跳转。它们之间的区别在于，path 是一个路由的唯一标识符，用于匹配路由和生成链接，而 name 只是起到一个方便开发者进行操作的作用，可以理解为一个便于记忆的别名。

在使用 Vue Router 进行编程时，当我们需要在代码中跳转到某一个路由时，可以通过 name 来进行跳转。这样做的好处是，我们在更改路由地址时，不需要修改代码中的路径，只需要修改路由配置中的 path 就可以了，这样就避免了在多处修改路径时可能出现的错误。

## Vue Router 是什么？它有什么用途？

Vue Router 和 Vuex 都是 Vue.js 生态系统中常用的插件，但是它们的职责不同。

Vue Router 主要负责管理 Vue 应用中的路由，提供路由映射、导航、路由钩子等功能，使得开发者可以方便地实现单页应用的路由跳转和状态管理。

而 Vuex 则主要负责 Vue 应用中的状态管理，提供了全局状态管理的方案，使得开发者可以在不同组件之间共享数据，并且通过 Vuex 提供的 API 进行统一的状态管理和调用。

在实际的开发中，Vue Router 和 Vuex 通常会搭配使用，通过 Vue Router 管理路由跳转，在路由跳转时修改 Vuex 中的状态，从而实现全局状态的管理。此外，Vue Router 还提供了访问路由信息的方法，可以在路由跳转时读取当前路由的信息，从而进行更灵活的业务处理。
